
<template>
  <!-- <div style="width:100vw;height:100vh;overflow: hidden;">
  <div class="main"> -->
<!-- 表单数据 -->
    <div class="data">
      <!-- <div class="tableList"> -->
        <el-table
          :data="table_data.data"
          :row-class-name="tableRowClassName"
          height="100%"
          style="width: 100%">
          <el-table-column
            v-if="is_index"
            type="index"
            label="序号"
            align="center"
            width="50">
          </el-table-column>
          <template v-for="header in table_data.header" >
            <el-table-column
              :prop= header.id
              :label=header.name
              align="center"
              >
              <template slot-scope="scope" >
                <p v-if="table_data.heightLight.id == header.id" :style="{'color':selectColor(table_data,scope.row)}">{{ scope.row[header.id] }}</p>
                <p v-else>{{ scope.row[header.id] }}</p>
              </template>
            </el-table-column>
          </template>

          <el-table-column
            v-if="is_view"
            label="查看"
            align="center"
            >
            <template slot-scope="scope">
              <i class="el-icon-view btn"></i>
            </template>
          </el-table-column>

        </el-table>
      </div>
    <!-- </div> -->

  <!-- </div>
</div> -->
</template>

<script>
export default {
props:{
  table_data:{
    type:Object,
    required:true
  },
  is_index:{
    type:Boolean,
    default:false
  },
  is_view:{
    type:Boolean,
    default:false
  },
  is_stripe:{
    type:Boolean,
    default:false
  }
},
data() {
  return {
    table_data01: {
      header:[
        {id:'address',name:'地址'},
        {id:'reason',name:'原因'},
        {id:'state',name:'状态'},
      ],
      data:[
        {
          address: '停车场B1',
          reason: '跳闸',
          state: '待处理'
        }, {
          address: '停车场B3',
          reason: '跳闸',
          state: '待处理'
        }, {
          address: '停车场B3',
          reason: '跳闸',
          state: '待处理'
        }
        , {
          address: '停车场B3',
          reason: '跳闸',
          state: '待处理'
        }
        , {
          address: '停车场B3',
          reason: '跳闸',
          state: '待处理'
        }
        , {
          address: '停车场B3',
          reason: '跳闸',
          state: '待处理'
        }
      ]
    },
    colorMap:{}
  }
},
methods:{
  tableRowClassName({row, rowIndex}) {
    let this_ = this;
    if(this_.$props.is_stripe){
      if (rowIndex % 2 == 0) {
            return 'one_row';
          } else if (rowIndex % 2 == 1) {
            return 'tow_row';
          }
          return '';
      }else{
        return '';
      }
    },
  selectColor(tableData,row){
    let rowDataList = tableData.heightLight
    if(this.colorMap.size == 0){
      let map = new Map();
      rowDataList.colors.forEach(color => {
        map.set(color.text,color.color);
      });
      this.colorMap = map;
    }
    console.log('this.colorMap',this.colorMap);
    return this.colorMap.get(row[rowDataList.id]);
  }
},
created(){
  this.colorMap = new Map();
},
mounted(){
}
}
</script>

<style scoped lang="less">
@import '../../assets/css/chuShiHua.less';
.main{
  width: calc((100% - 2vw) * 0.24);
  height: calc(((92% - 2vh)  * 0.95 * 0.32) - 4vh );
  background: #050505;
  margin: 50px;
  padding: 1vh 1vw;
}

.data{
width: 100%;
height: 100%;
}
.tableList{
width: 105%;
height: 100%;
overflow-y: scroll;
}
.btn{
cursor: pointer;
}

/deep/ .el-table {
//表头样式
.el-table__header-wrapper .has-gutter .el-table__cell{
  background-color: #2f3639;
  color: #ddd;
  border-bottom: none;
  padding: 4px 0;
}
//表格样式
.el-table__body-wrapper .el-table__row{
  background-color: #050505;
  color: #ddd;

  //取消表格底边框
  .el-table__cell{
    border-bottom: none;
    padding: 0 0;
  }
}

.el-table__body-wrapper .el-table__row.one_row{
  background-color: #050505;
}
.el-table__body-wrapper .el-table__row.tow_row{
  background-color: #131516;
}

//表格行触摸效果
.el-table__body-wrapper .el-table__body .el-table__row:hover>td.el-table__cell{
  background-color: transparent;
}
}
//取消表格底部边框
/deep/.el-table::before{
background-color: #ffffff00;
}
//取消表格背景
/deep/.el-table, .el-table__expanded-cell{
background-color: #fff0;
}


//滚动条样式
/deep/ .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar{
width: 10px !important;
padding-left: 5px !important;
cursor: pointer !important;
}
/deep/ .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-button{
opacity: 0 !important;
}
/deep/ .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb{
background: rgba(31,198,255,0) !important;
border-radius: 4px 4px 4px 4px;
cursor: pointer;
}
/deep/ .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb:hover{
background: rgba(31, 198, 255, 0.3) !important;
}
/deep/ .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track {
border-radius: 4px 4px 4px 4px !important;
}


</style>
